<template>
  <el-dialog v-model="show" title="修改备注" width="500px" append-to-body :close-on-click-modal="false">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="订单备注" prop="remarks">
        <el-input v-model="form.remarks" type="textarea" rows="5" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="show=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { toRefs } from '@vueuse/shared'
import { updateMark } from '@/api/logex/order'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])

const data = reactive({
  show: false,
  form: {},
  rules: {
    remarks: { required: true, message: '必填', trigger: 'blur' }
  }
})
const { show, form, rules } = toRefs(data)

function submitForm() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      updateMark(form.value).then(() => {
        proxy.$modal.msgSuccess('保存成功')
        show.value = false
        emit('submitForm')
      })
    }
  })
}

function open(order) {
  show.value = true

  form.value = {
    id: order.id,
    remarks: order.remarks
  }
}

defineExpose({
  open
})

</script>

<style scoped>

</style>
